<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>刘玥</title>

  <!-- <link type="text/css" rel="stylesheet" href="/public/static/index/renxi/default.css"> -->

  <script type="text/javascript" src="/public/static/index/renxi/jquery.min.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex.min.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex-parser.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex-jit.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex-builderbase.min.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex-async.min.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/jscex-async-powerpack.min.js"></script>

  <script type="text/javascript" src="/public/static/index/renxi/functions.js" charset="utf-8"></script>

  <script type="text/javascript" src="/public/static/index/renxi/love.js" charset="utf-8"></script>

  <style type="text/css">
body{margin:0;padding:0;background:#ffe;font-size:14px;font-family:'微软雅黑','宋体',sans-serif;color:#231F20;overflow:auto}
a {color:#000;font-size:14px;}
#main{width:100%;}
#wrap{position:relative;margin:0 auto;width:400px;height:68px;margin-top:5px;}
#text{width:200px;height:212px;left:30px;top:40px;position:absolute;}
#code{display:none;font-size:12px;}
#clock-box {position:absolute;left:30px;top:275px;font-size:14px;display:none;}
#clock-box a {font-size:14px;text-decoration:none;}
#clock{margin-left:14px;}
#clock .digit {font-size:32px;}
#canvas{margin:0 auto;width:400px;height:680px;}
#error{margin:0 auto;text-align:center;margin-top:30px;display:none;}
.hand{cursor:pointer;}
.say{margin-left:2px;}
.space{margin-right:110px;}














    <!--
    .STYLE1 {
      color: #666666
    }
    -->

  </style>

</head>

<body>


  <div id="main">

    <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a
        href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a
        href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>

    <div id="wrap">

      <div id="text">

        <div id="code">

          <font color="#FF0000"> <span class="say"> 我知道遇见你不容易，</span><br>

            <span class="say"> </span><br>

            <span class="say"> 错过了会很可惜，</span><br>

            <span class="say"> </span><br>







            <span class="say">我不希望余生都是回忆，</span><br>
            <span class="say"></span><br>

            <span class="say">我想余生每一天都是你</span><br>
            <span class="say"></span><br>
            <span class="say">我爱你</span><br>



            

            <span class="say"> </span><br>

            <span class="say"><span class="space"></span> -- 爱你的许波 --</span>

          </font>
          </p>

        </div>

      </div>

      <div id="clock-box">

        <span class="STYLE1"></span>
        <font color="#33CC00">亲爱的小傻子，我喜欢你</font>

        <span class="STYLE1">已经是……</span>

        <div id="clock"></div>

      </div>

      <canvas id="canvas" width="400" height="340"></canvas>

    </div>



  </div>



  <script>

  </script>



  <script>
    (function () {

      var canvas = $('#canvas');



      if (!canvas[0].getContext) {

        $("#error").show();

        return false;
      }



      var width = canvas.width();

      var height = canvas.height();

      canvas.attr("width", width);

      canvas.attr("height", height);

      var opts = {

        seed: {

          x: width / 2 - 20,

          color: "rgb(190, 26, 37)",

          scale: 2

        },

        branch: [

          [267, 680, 285, 250, 250, 200, 15, 100, [

            [270, 500, 277, 417, 270, 400, 6, 100, [

              [275, 435, 267, 430, 197, 395, 1, 40]

            ]],

            [277, 445, 300, 356, 340, 345, 6, 100, [

              [289, 400, 324, 409, 330, 426, 1, 80]

            ]],

            [269, 281, 268, 248, 267, 217, 1, 40],

            [273, 397, 206, 247, 164, 244, 4, 80, [

              [213, 286, 191, 253, 185, 205, 1, 40],

              [249, 345, 217, 315, 197, 330, 2, 60]

            ]],

            [278, 357, 304, 252, 389, 221, 3, 100, [

              [295, 293, 323, 277, 324, 271, 1, 80]

            ]]

          ]]

        ],

        bloom: {

          num: 700,

          width: 540,

          height: 650,

        },

        footer: {

          width: 1200,

          height: 5,

          speed: 10,

        }

      }



      var tree = new Tree(canvas[0], width, height, opts);

      var seed = tree.seed;

      var foot = tree.footer;

      var hold = 1;



      canvas.click(function (e) {

        var offset = canvas.offset(),
          x, y;

        x = e.pageX - offset.left;

        y = e.pageY - offset.top;

        if (seed.hover(x, y)) {

          hold = 0;

          canvas.unbind("click");

          canvas.unbind("mousemove");

          canvas.removeClass('hand');

        }

      }).mousemove(function (e) {

        var offset = canvas.offset(),
          x, y;

        x = e.pageX - offset.left;

        y = e.pageY - offset.top;

        canvas.toggleClass('hand', seed.hover(x, y));

      });



      var seedAnimate = eval(Jscex.compile("async", function () {

        seed.draw();

        while (hold) {

          $await(Jscex.Async.sleep(10));

        }

        while (seed.canScale()) {

          seed.scale(0.95);

          $await(Jscex.Async.sleep(5));

        }

        while (seed.canMove()) {

          seed.move(0, 2);

          foot.draw();

          $await(Jscex.Async.sleep(10));

        }

      }));



      var growAnimate = eval(Jscex.compile("async", function () {

        do {

          tree.grow();

          $await(Jscex.Async.sleep(10));

        } while (tree.canGrow());

      }));



      var flowAnimate = eval(Jscex.compile("async", function () {

        do {

          tree.flower(2);

          $await(Jscex.Async.sleep(10));

        } while (tree.canFlower());

      }));



      var moveAnimate = eval(Jscex.compile("async", function () {

        tree.snapshot("p1", 1, 0, 305, 680);

        while (tree.move("p1", 500, 0)) {

          foot.draw();

          $await(Jscex.Async.sleep(10));

        }

        foot.draw();

        tree.snapshot("p2", 250, 0, 305, 680);



        // 会有闪烁不得意这样做, (＞﹏＜)

        canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");

        canvas.css("background", "#ffe");

        $await(Jscex.Async.sleep(300));

        canvas.css("background", "none");

      }));



      var jumpAnimate = eval(Jscex.compile("async", function () {

        var ctx = tree.ctx;

        while (true) {

          tree.ctx.clearRect(0, 0, width, height);

          tree.jump();

          foot.draw();

          $await(Jscex.Async.sleep(25));

        }

      }));



      var textAnimate = eval(Jscex.compile("async", function () {

        var together = new Date();

        together.setFullYear(2020, 0, 10); //时间年月日

        together.setHours(21); //小时	

        together.setMinutes(09); //分钟

        together.setSeconds(0); //秒前一位

        together.setMilliseconds(2); //秒第二位



        $("#code").show().typewriter();

        $("#clock-box").fadeIn(500);

        while (true) {

          timeElapse(together);

          $await(Jscex.Async.sleep(1000));

        }

      }));



      var runAsync = eval(Jscex.compile("async", function () {

        $await(seedAnimate());

        $await(growAnimate());

        $await(flowAnimate());

        $await(moveAnimate());



        textAnimate().start();



        $await(jumpAnimate());

      }));



      runAsync().start();

    })();
  </script>



</body>

</html>